<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         * {
        padding: 0;
        margin: 0;
      }

      .container {
        position: relative;
        width: 600px;
        height: 400px;
        /* border: 2px solid red; */
        margin: 20px auto;
        overflow: hidden;
      }

      .container ul {
        position: absolute;
        left: 0px;
        width: 3000px;
        height: 400px;
        /*border:3px solid green; */
      }

      .container ul li {
        float: left;
        list-style-type: none;
        /* 设置元素的透明度 */
        /* opacity:0.8;   */
      }

      .container ul li img {
        width: 600px;
        height: 400px;
      }

      .container .arrow {
        /*默认是隐藏*/
        display: none;
        position: absolute;
        top: 50%;
        width: 20px;
        height: 30px;
        line-height: 30px;
        margin-top: -15px;
        /* background-color: rgba(233, 81, 10, 0.5); */
        background-color: rgba(0, 0, 0, 0.3);
        text-decoration: none;
        color: #fff;
        text-align: center;
        font-size: 18px;
        cursor: pointer;
      }

      .container .arrow:hover {
        background-color: rgba(0, 0, 0, 0.5);
      }

      .container .arrow-left {
        left: 0px;
        border-radius: 0px 15px 15px 0px;
      }

      .container .arrow-right {
        right: 0px;
        border-radius: 15px 0px 0px 15px;
      }

      .container .dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        width: 70px;
        height: 15px;
        line-height: 15px;
        margin-left: -35px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        text-align: center;
      }

      .container .dots span {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-bottom: 2px;
        background-color: #fff;
        cursor: pointer;
      }

      .container .dots .current {
        background-color: rgb(255, 80, 0);
      }
    </style>
   
</head>
<body>
    <div class="container">
        <ul style="left: 0px">
          <li><img src="./11-轮播图/img/1.jpg" alt="" /></li>
          <li><img src="./11-轮播图/img/2.jpg" alt="" /></li>
          <li><img src="./11-轮播图/img/3.jpg" alt="" /></li>
          <li><img src="./11-轮播图/img/4.jpg" alt="" /></li>
          <li><img src="./11-轮播图/img/5.jpg" alt="" /></li>
        </ul>
        <a class="arrow arrow-left" href="javascript:;"> &lt; </a>
        <a class="arrow arrow-right" href="javascript:;"> &gt; </a>
        <div class="dots" id="dotWrap">
          <span class="current"></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <script>
         //当鼠标移到div上，左右箭头显示
         var container = document.getElementsByClassName('container')[0]
         var arrowLeft = document.getElementsByClassName('arrow-left')[0]
         var arrowRight = document.getElementsByClassName('arrow-right')[0]
         container.addEventListener('mouseover',function(){
            arrowRight.classList.remove('arrow')
         })
      </script>
</body>
</html>